window.addEventListener('load', function () {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "#C1C1C1", 	//点颜色
        stroke: "#EDEDED", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);

    // 次数的渲染
    //0.获取相关DOM
    let apiDetails = getEle('#apiDetails');
    let timesBox = getEle('#timesBox');
    let priceBox = getEle('#priceBox');
    //1.定义数据源
    let apiTimeData = [
        { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
        { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
        { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
    ];

    //遍历数据进行相关渲染
    apiTimeData.forEach(function (v, i) {
        // console.log(v);

        //创建标签 li
        let liDom = document.createElement('li');
        // 判定
        if (i == 0) {
            liDom.className = 'default-li active';
        } else {
            liDom.className = 'default-li';
        }
        //添加属性
        // liDom.className = 'default-li';

        //添加文本
        liDom.innerHTML = v.times + '次';

        //添加节点到指定apiDetails的内容之后
        apiDetails.appendChild(liDom)

        // 把第一条数据对应值放到指定位置
        timesBox.innerHTML = apiTimeData[0].times;
        priceBox.innerHTML = apiTimeData[0].unitPrice;

    })
    // li点击事件
    // 1.获取元素对象
    let detailsLi = getEleAll('#apiDetails .default-li');
    // 2.遍历
    detailsLi.forEach(function (v,i) {
        v.addEventListener('click', function () {
            // 把li上active删除
            detailsLi.forEach(function(vv){
                vv.classList.remove('active');
            })
            
            // 给当前li添加active
            this.classList.add('active');
            // 回填数据
            timesBox.innerHTML = apiTimeData[i].times;
            priceBox.innerHTML = apiTimeData[i].unitPrice;
        })
    
    })
    
}) 
//tab切换效果

tab('#docu-nav ul li','active','.docu-left>div','on')